<!doctype html>
<html lang=en-us>
<head>
<meta charset=utf-8>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>Emscripten-Generated Code</title>
<style>
    body {
        font-family: arial;
        margin: 0;
        padding: none
    }

    .emscripten {
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block
    }

    div.emscripten {
        text-align: center
    }

    div.emscripten_border {
        border: 1px solid #000
    }

    canvas.emscripten {
        border: 0 none;
        background-color: #000
    }

    #emscripten_logo {
        display: inline-block;
        margin: 0
    }

    .spinner {
        height: 30px;
        width: 30px;
        margin: 0;
        margin-top: 20px;
        margin-left: 20px;
        display: inline-block;
        vertical-align: top;
        -webkit-animation: rotation .8s linear infinite;
        -moz-animation: rotation .8s linear infinite;
        -o-animation: rotation .8s linear infinite;
        animation: rotation .8s linear infinite;
        border-left: 5px solid #ebebeb;
        border-right: 5px solid #ebebeb;
        border-bottom: 5px solid #ebebeb;
        border-top: 5px solid #787878;
        border-radius: 100%;
        background-color: #bdd72e
    }

    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0)
        }

        to {
            -webkit-transform: rotate(360deg)
        }
    }

    @-moz-keyframes rotation {
        from {
            -moz-transform: rotate(0)
        }

        to {
            -moz-transform: rotate(360deg)
        }
    }

    @-o-keyframes rotation {
        from {
            -o-transform: rotate(0)
        }

        to {
            -o-transform: rotate(360deg)
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    #status {
        display: inline-block;
        vertical-align: top;
        margin-top: 30px;
        margin-left: 20px;
        font-weight: 700;
        color: #787878
    }

    #progress {
        height: 20px;
        width: 300px
    }

    #controls {
        display: inline-block;
        float: right;
        vertical-align: top;
        margin-top: 30px;
        margin-right: 20px
    }

    #output {
        width: 100%;
        height: 200px;
        margin: 0 auto;
        margin-top: 10px;
        border-left: 0;
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
        display: block;
        background-color: #000;
        color: #fff;
        font-family: 'Lucida Console',Monaco,monospace;
        outline: 0
    }
</style>
</head>
<body>
<div class=spinner id=spinner></div>
<div class=emscripten id=status>Downloading...</div>
<span id=controls>
    <span>
        <input type=checkbox id=resize>Resize canvas
    </span>
    <span>
        <input type=checkbox id=pointerLock checked>Lock/hide mouse pointer    
    </span>
    <span>
        <input type=button onclick='Module.requestFullscreen(document.getElementById("pointerLock").checked,document.getElementById("resize").checked)' value=Fullscreen>
    </span>
</span>
<div class=emscripten>
    <progress hidden id=progress max=100 value=0></progress>
</div>
<div class=emscripten_border>
    <canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas>
</div>
<textarea id=output rows=8></textarea>
<script>
var Module;
(async () => {
    var statusElement = document.getElementById("status")
        , progressElement = document.getElementById("progress")
        , spinnerElement = document.getElementById("spinner");
    Module = {
        preRun: [],
        postRun: [],
        print: function() {
            var t = document.getElementById("output");
            return t && (t.value = ""),
            function(e) {
                1 < arguments.length && (e = Array.prototype.slice.call(arguments).join(" ")),
                console.log(e),
                t && (t.value += e + "\n",
                t.scrollTop = t.scrollHeight)
            }
        }(),
        printErr: function(e) {
            1 < arguments.length && (e = Array.prototype.slice.call(arguments).join(" ")),
            console.error(e)
        },
        canvas: function() {
            var e = document.getElementById("canvas");
            return e.addEventListener("webglcontextlost", function(e) {
                alert("WebGL context lost. You will need to reload the page."),
                e.preventDefault()
            }, !1),
            e
        }(),
        setStatus: function(e) {
            if (Module.setStatus.last || (Module.setStatus.last = {
                time: Date.now(),
                text: ""
            }),
            e !== Module.setStatus.last.text) {
                var t = e.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/)
                    , n = Date.now();
                t && n - Module.setStatus.last.time < 30 || (Module.setStatus.last.time = n,
                Module.setStatus.last.text = e,
                t ? (e = t[1],
                progressElement.value = 100 * parseInt(t[2]),
                progressElement.max = 100 * parseInt(t[4]),
                progressElement.hidden = !1,
                spinnerElement.hidden = !1) : (progressElement.value = null,
                progressElement.max = null,
                progressElement.hidden = !0,
                e || (spinnerElement.style.display = "none")),
                statusElement.innerHTML = e)
            }
        },
        totalDependencies: 0,
        monitorRunDependencies: function(e) {
            this.totalDependencies = Math.max(this.totalDependencies, e),
            Module.setStatus(e ? "Preparing... (" + (this.totalDependencies - e) + "/" + this.totalDependencies + ")" : "All downloads complete.")
        }
    };
    Module.setStatus("Downloading..."),
    window.onerror = function(e) {
        Module.setStatus("Exception thrown, see JavaScript console"),
        spinnerElement.style.display = "none",
        Module.setStatus = function(e) {
            e && Module.printErr("[post-exception status] " + e)
        }
    }

    {
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        Module.preinitializedWebGPUDevice = device;
    }

    {
        const js = document.createElement('script');
        js.async = true;
        js.src = 'example-01-cubesDebug.js';
        document.body.appendChild(js);
    }
})();
</script>
</body>
</html>
